<template>
  <el-dialog
    class="ba-operate-dialog"
    style="width: 80%"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div
        class="title"
        v-drag="['.ba-operate-dialog', '.el-dialog__header']"
      ></div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
      >
        <el-table :data="state.tableData" border style="width: 100%">
          <!-- <el-table-column prop="purchaseListId" label="采购单号" width="180" /> -->
          <el-table-column prop="supplierName" label="供应商名称" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="materialCode" label="物料编号" />
          <el-table-column prop="purchaseQuantity" label="采购数量" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="specs" label="规格型号" />
        </el-table>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="purchasePrint"
          type="success"
        >
          打印
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";

const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();

const state: { tableData: anyObj[] } = reactive({
  tableData: [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ],
});

//打印采购单
const purchasePrint = () => {};
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}

.table-el-tree {
  :deep(.el-tree-node) {
    white-space: unset;
  }

  :deep(.el-tree-node__content) {
    display: block;
    align-items: unset;
    height: unset;
  }
}
</style>
